<template>
	<!-- 查询条件 -->
	<u-popup :show="popShow" :round="40" mode="bottom" @close="popClose">
		<view class="popup">
			<!-- 标题 -->
			<view class="popup_title">
				<view>已办筛选</view>
				<view class="popup_title_icon">
					<image @click="popClose" style="width: 1rem;; height: 0.5rem;"
						src='~@/static/images/correction/correction-warn-close.png'>
				</view>
			</view>

			<!-- 时间 -->
			<view class="popup_condition">
				<view class="popup_condition_title">
					预警时间
				</view>
				<view class="popup_condition_tag">
					<view @click="timeClick(queryRange.OneWeek)"
						:class="`popup_condition_tag_item ${querySelect.warnTime == queryRange.OneWeek ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						近一周
					</view>
					<view @click="timeClick(queryRange.oneMonth)"
						:class="`popup_condition_tag_item ${querySelect.warnTime == queryRange.oneMonth ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						近一个月
					</view>
					<view @click="timeClick(queryRange.threeMonths)"
						:class="`popup_condition_tag_item ${querySelect.warnTime == queryRange.threeMonths ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						近三个月
					</view>
				</view>
				<view class="popup_condition_tag">
					<view @click="calendarOpen('f_rectime')"
						:class="`popup_condition_tag_item ${querySelect.warnTime == queryRange.selfSelect ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`"
						style="width: 42%">
						<view class="popup_condition_tag_item_date">
							<span>{{ queryParam.f_rectime }}</span>
							<image style="width: 1rem;; height: 1rem;"
								src='~@/static/images/correction/correction-warn-date.png' />
						</view>
					</view>
					<view class="popup_condition_tag_line">
						—
					</view>
					<view @click="calendarOpen('f_rectime_01')"
						:class="`popup_condition_tag_item ${querySelect.warnTime == queryRange.selfSelect ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`"
						style="width: 42%">
						<view class="popup_condition_tag_item_date">
							<span>{{ queryParam.f_rectime_01 }}</span>
							<image style="width: 1rem;; height: 1rem;"
								src='~@/static/images/correction/correction-warn-date.png' />
						</view>
					</view>
				</view>
			</view>

			<!-- 日期选择器 -->
			<u-calendar class="" :show="calendarShow" :monthNum="36" :min-date="minDateVal" :max-date="maxDateVal"
				@confirm="calendarConfirm($event, queryRange.selfSelect, calendarField)" @close="calendarClose"
				:defaultDate="new Date()"></u-calendar>
			<!-- defaultDate="2024-4-17"  minDate="1970-1-1" maxDate="2024-1-1" -->

			<!-- 类别 -->
			<view class="popup_condition">
				<view class="popup_condition_title">
					预警类别
				</view>
				<view class="popup_condition_tag">
					<view @click="typeClick(Tp_crc_warnValue.LOCATIONS)"
						:class="`popup_condition_tag_item ${queryParam.f_type.includes(Tp_crc_warnValue.LOCATIONS) ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						重点场所
					</view>
					<view @click="typeClick(Tp_crc_warnValue.CROSS)"
						:class="`popup_condition_tag_item ${queryParam.f_type.includes(Tp_crc_warnValue.CROSS) ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						违规越界
					</view>
					<view @click="typeClick(Tp_crc_warnValue.SEPARATION)"
						:class="`popup_condition_tag_item ${queryParam.f_type.includes(Tp_crc_warnValue.SEPARATION) ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						人机分离
					</view>
				</view>
				<view class="popup_condition_tag">
					<view @click="typeClick(Tp_crc_warnValue.LURKS)"
						:class="`popup_condition_tag_item ${queryParam.f_type.includes(Tp_crc_warnValue.LURKS) ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						昼伏夜出
					</view>
				</view>
			</view>

			<!-- 状态 -->
			<view class="popup_condition" style="height: 15%;">
				<view class="popup_condition_title">
					处置情况
				</view>
				<view class="popup_condition_tagtwo">
					<view @click="supClick()"
						:class="`popup_condition_tag_item ${3200 == queryParam.f_issup ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						督办
					</view>
					<view @click="statusClick()"
						:class="`popup_condition_tag_item ${queryParam.f_worktype.includes(Tp_crc_workValue.CANCEL) ? 'popup_condition_tag_item_active' : 'popup_condition_tag_item_disable'}`">
						系统误报
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="popup_button">
				<view @click="resetClick" class="popup_button_itemone">
					重置
				</view>
				<view @click="searchClick" class="popup_button_itemtwo">
					查询
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		Tp_crc_warnValue
	} from '@/common/enumeration/Tp_crc_warn.js'
	import {
		Tp_crc_workValue
	} from '@/common/enumeration/Tp_crc_work.js'
	export default {
		data() {
			return {
				Tp_crc_workValue: Tp_crc_workValue,
				calendarField: undefined, // 日期编辑字段
				Tp_crc_warnValue: Tp_crc_warnValue, // 社矫类型枚举
				// 范围可选项
				queryRange: {
					OneWeek: 'OneWeek',
					oneMonth: 'oneMonth',
					threeMonths: 'threeMonths',
					selfSelect: 'selfSelect'
				},
				// 已选项
				querySelect: {
					warnTime: undefined
				},
				// 查询条件
				queryParam: {
					f_worktype: [], // 处置类型
					f_issup: undefined, // 是否督办
					f_type: [], // 预警类型
					f_rectime: undefined, // 预警开始时间
					f_rectime_01: undefined, // 预警截止时间
				},
				calendarShow: false, // 日期选择
				popShow: false,
			}
		},
		async onLoad() {},
		computed: {
			// 最小可选时间
			minDateVal() {
				let time = new Date().getTime();
				return time - 92016000000 // 可以查近三年内的订单
			},
			// 最大可选时间
			maxDateVal() {
				return new Date().getTime(); // 默认当前时间为最大值
			}
		},
		methods: {
			// 搜索按钮
			searchClick() {
				let todayMoment = this.$moment()
				switch (this.querySelect.warnTime) {
					case this.queryRange.OneWeek: {
						this.queryParam.f_rectime_01 = todayMoment.format('YYYY-MM-DD')
						this.queryParam.f_rectime = todayMoment.subtract(7, 'days').format('YYYY-MM-DD')
						break
					}
					case this.queryRange.oneMonth: {
						this.queryParam.f_rectime_01 = todayMoment.format('YYYY-MM-DD')
						this.queryParam.f_rectime = todayMoment.subtract(1, 'month').format('YYYY-MM-DD')
						break
					}
					case this.queryRange.threeMonths: {
						this.queryParam.f_rectime_01 = todayMoment.format('YYYY-MM-DD')
						this.queryParam.f_rectime = todayMoment.subtract(3, 'month').format('YYYY-MM-DD')
						break
					}
				}
				console.log('查询条件', this.queryParam)
				this.$emit('f_search', this.queryParam)
				this.popShow = false
			},
			// 重置按钮
			resetClick() {
				this.querySelect = {
					warnTime: undefined
				}
				this.queryParam = {
					f_worktype: [], // 处置类型
					f_issup: undefined, // 是否督办
					f_type: [], // 预警类型
					f_rectime: undefined, // 开始时间
					f_rectime_01: undefined, // 截止时间
				}
			},
			// 督办点击
			supClick() {
				this.queryParam.f_worktype = []
				this.queryParam.f_issup = 3200
			},
			// 类型状态选择
			statusClick() {
				this.queryParam.f_issup = undefined
				this.queryParam.f_worktype = [Tp_crc_workValue.CANCEL]
			},
			// 类型范围选择
			typeClick(value) {
				console.log('typeClick', value)
				const index = this.queryParam.f_type.indexOf(value)
				if (index == -1) {
					this.queryParam.f_type.push(value)
				} else {
					this.queryParam.f_type.splice(index, 1)
				}
			},
			// 时间范围选择
			timeClick(value) {
				console.log('timeClick', value)
				this.queryParam.f_rectime = undefined
				this.queryParam.f_rectime_01 = undefined
				this.querySelect.warnTime = value
			},
			// 日期选择关闭
			calendarClose(val, field) {
				this.calendarShow = false
			},
			// 日期选择确认
			calendarConfirm(val, type, field) {
				console.log('calendarConfirm', val[0], field)
				this.querySelect.warnTime = type
				this.queryParam[field] = val[0]
				this.calendarShow = false
			},
			// 日期选择弹框
			calendarOpen(field) {
				this.calendarField = field
				this.calendarShow = true
			},
			// 查询条件关闭
			popClose() {
				this.popShow = false
			},
			// 查询条件打开
			f_popOpen() {
				this.resetClick()
				this.popShow = true
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/flex.scss';

	.popup {
		width: 100%;
		height: 36rem;
		// border: 1px solid blue;
		letter-spacing: 0.05rem;

		&_title {
			@extend .algin_justity_center;
			height: 10%;
			// border: 1px solid red;
			position: relative;
			font-size: 1.2rem;

			// font-weight: 800;
			&_icon {
				position: absolute;
				bottom: 1.2rem;
				right: 2.5rem;
			}
		}

		&_condition {
			height: 28%;
			// border: 1px solid red;
			width: 100%;
			padding-left: 5%;


			&_title {
				// height: 25%;
				text-align: left;
				margin-bottom: 4%;
			}

			&_tagtwo {
				width: 90%;
				height: 45%;
				// margin-bottom: 4%;
				// border: 1px solid blue;
				display: flex;
				font-size: 0.9rem;
			}

			&_tagtwo view {
				margin-right: 5%;
			}

			&_tag {
				width: 90%;
				height: 25%;
				// border: 1px solid blue;
				@extend .algin_top_justify_between;
				margin-bottom: 4%;
				font-size: 0.9rem;



				&_item {
					width: 30%;
					border: 1px solid red;
					height: 100%;
					@extend .algin_justity_center;
					border-radius: 0.8rem;

					&_date {
						color: #aaa;
						// border: 1px solid red;
						width: 80%;
						@extend .space_between;
					}

					&_active {
						border: 1px solid #a4d1fc;
						background-color: #eff8ff;
						color: #a4d1fc;
					}

					&_disable {
						border: none;
						background-color: #f2f4f7;
						color: #9ea0a2;
					}
				}

				&_line {
					height: 100%;
					@extend .algin_justity_center;
					color: #c6c8ca;
					width: 1%;
				}
			}
		}

		&_button {
			height: 19%;
			// border: 1px solid black;
			width: 100%;
			@extend .space_around;
			align-items: center;

			&_itemone,
			&_itemtwo {
				width: 40%;
				height: 38%;
				// border: 1px solid red;
				@extend .algin_justity_center;
				border-radius: 10px;
				color: #fff;
			}

			&_itemone {
				background-color: #b3b3b4;
			}

			&_itemtwo {
				background-color: #1a75d5;
			}
		}
	}
</style>